﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remote Control</title>
    <style>
        /* 简单的按钮样式 */
        button {
            padding: 10px;
            font-size: 20px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h2>小车控制</h2>
    <button onclick="sendCommand('forward')">前进</button>
    <button onclick="sendCommand('backward')">后退</button>
    <button onclick="sendCommand('left')">左转</button>
    <button onclick="sendCommand('right')">右转</button>
    <button onclick="sendCommand('stop')">停止</button>
    
    <img src="ws://192.168.0.106:3333/app/stream" width="640" height="480" id="stream" />


    <script>
        // 连接到 WebSocket 服务器
        const socket = new WebSocket('ws://192.168.0.112:8080/control');
        
        socket.onopen = function(event) {
            console.log('WebSocket connected');
        };

        socket.onmessage = function(event) {
            console.log('Received: ' + event.data);
        };

        socket.onclose = function(event) {
            console.log('WebSocket closed');
        };

        // 发送控制命令
        function sendCommand(command) {
            if (socket.readyState === WebSocket.OPEN) {
                socket.send(command); // 发送命令到后端
                console.log('Sent: ' + command);
            } else {
                alert('WebSocket not connected');
            }
        }
    </script>
</body>
</html>
